<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>requestIdleCallback使用</title>
</head>
<body>


    <!--
        requestIdleCallback到底是什么呢？
        requestIdleCallback 跟 React fiber架构有什么关系呢？
        requestIdleCallback 对于性能优化有什么帮助呢？
    -->













    <script>
        var handle = window.requestIdleCallback(callback, [options]);
        window.cancelIdleCallback(handle);
        //timeRemaining() 方法，能够获取
        var deadline = {
            timeRemaining: () => number,  // 当前浏览器的剩余空闲时间(该帧剩余时间。)，单位 ms；
            didTimeout: boolean // 是否超时。
        }

        function work(deadline) {  
            console.log(`当前帧剩余时间: ${deadline.timeRemaining()}`);
            if (deadline.timeRemaining() > 1 || deadline.didTimeout) {
                // 走到这里，说明时间有余，我们就可以在这里写自己的代码逻辑
            }
            // 走到这里，说明时间不够了，就让出控制权给主线程，下次空闲时继续调用
            requestIdleCallback(work);
        }

        requestIdleCallback(work, { timeout: 1000 });














        // requestIdleCallback 和 requestAnimationFrame 的区别
    </script>

</body>
</html>